<template>

	<view class="bookreader" :style="{'--fontSize': fontSize + 'px', 
	'--lineHeight': lineHeight, 
	'--paddingTop': paddingTop + 'px',
	'--paddingRight': paddingRight + 'px',
	'--paddingBottom': paddingBottom + 'px',
	'--paddingLeft': paddingLeft + 'px',
	'--titleFontSize': titleFontSize + 'px'
	}">
		<swiper @change="change" :current="currentIndex">
			<swiper-item v-for="(items, index) in contents" :key="index">
				<view v-for="(item, index2) in items" :key="index2" :class="{title: item.isTitle}">
					<text space="emsp" >{{item.content}}</text>
				</view>
			</swiper-item>

		</swiper>
	</view>

</template>

<script>
	import {
		fetchChapterList,
		fetchChapterContent
	} from "../../api/api.js"
	export default {
		props: {
			fontSize: {
				default: 16,
				type: Number
			},
			lineHeight: {
				default: 1.5,
				type: Number
			},
			prev: {
				default: ()=>null,
				type: Object
			},
			current: {
				default: ()=>null,
				type: Object
			},
			next: {
				default: ()=>null,
				type: Object
			},
			width: {
				default: 0,
				type: Number
			},
			height: {
				default: 0,
				type: Number
			}
		},
		data() {
			return {
				//maxLineCount:1,
				//maxColunmCount: 1
				contents: [],
				currentIndex: 0,
				index1: 0,
				index2: 0,
				paddingTop: 5,
				paddingRight: 5,
				paddingBottom: 5,
				paddingLeft: 5,
			};
		},

		updated() {
			//debugger
			const _this = this;
			//const res = uni.getSystemInfoSync();
			const maxLineCount = parseInt((this.height - this.paddingTop - this.paddingBottom) / _this._lineHeight);
			const maxColunmCount = parseInt((this.width - this.paddingLeft - this.paddingRight) / _this.fontSize);

			console.log("updated", maxLineCount, maxColunmCount)

			_this.contents = []

			 //this.pushContent(_this.prev, maxLineCount, maxColunmCount)
			this.pushContent2(_this.prev)
			_this.index1 = _this.contents.length
			//this.pushContent(_this.current, maxLineCount, maxColunmCount)
			this.pushContent2(_this.current)
			_this.index2 = _this.contents.length
			//this.pushContent(_this.next, maxLineCount, maxColunmCount)
			this.pushContent2(_this.next)

			this.currentIndex = this.index1;
			console.log(this.currentIndex);

		},
		computed: {

			_lineHeight() {
				return this.lineHeight * this.fontSize;
			},
			textIndent() {
				return this.fontSize * 2;
			},
			conentColunmSize() {
				return this.pageWidth / this.fontSize;
			},
			pageHeight() {
				return this.height - this.paddingTop - this.paddingBottom
			},
			pageWidth() {
				return this.width - this.paddingLeft - this.paddingRight;
			},
			titleFontSize() {
				return this.fontSize * 2; 
			},
			titleHeight() {
				return this.lineHeight * this.titleFontSize;
			},
			titleColunmNum() {
				return this.pageWidth / this.titleFontSize;
			}
			//单页高度：行数 * 行高
			/* async pageHeight() {
				const res = await uni.getSystemInfo();
				console.log(res.windowWidth);
				console.log(res.windowHeight);
				let maxLineCount = parseInt(this.totalHeight / this._lineHeight);
				return maxLineCount * this._lineHeight;
			}, */
		},
		methods: {
			pushContent2(chapter) {
				console.log(chapter)
				if (chapter == null) return
				if(chapter.contents == null) return

				let leftHeight = this.pageHeight;

				let tmp = this.calculationContent( {
					'content': chapter.title,
					'isTitle': true
				})

				for(let _ of tmp) {
					leftHeight -= this.titleHeight
				}

				for (var content of chapter.contents) {
					content = "  " + content;

					let chapterContent = this.calculationContent( {
						'content': content,
						'isTitle': false
					})

					for(var line of chapterContent) {
						leftHeight -= this._lineHeight
						if(leftHeight >= 0) {
							tmp.push(line)
						}
						else {
							leftHeight = this.pageHeight - this._lineHeight
							this.contents.push(tmp)
							tmp = []
							tmp.push(line)
						}
					}
				}

				if(tmp.length > 0) {
					this.contents.push(tmp)
				}
			},
			calculationContent(obj) {
				let colunmSize = 0
				let content = obj.content
				if(obj.isTitle) {
					colunmSize = this.titleColunmNum
				}
				else {
					colunmSize = this.conentColunmSize
				}

				let tmp = [];
				while (content.length > colunmSize) {
						tmp.push( {
							'content': content.substr(0, colunmSize),
							'isTitle': obj.isTitle
						});
						content = content.substr(colunmSize);
					}

				if(content.length > 0) {
					tmp.push({
							'content': content,
							'isTitle':  obj.isTitle
						});
				}

				return tmp

			},
			pushContent(values, maxLineCount, maxColunmCount) {
				if (values == null) return
				if(values.content == null) return
				
				const _this = this;

				//let i = 0;
				let tmp = [];
				tmp.push( {
					'content': values.title,
					'isTitle': true
				})

				
				for (var content of values.content) {
					//i++;

					content = "  " + content;


					while (content.length > maxColunmCount) {

						tmp.push( {
							'content': content.substr(0, maxColunmCount),
							'isTitle': false
						});
						content = content.substr(maxColunmCount);

						if (tmp.length >= maxLineCount) {
							_this.contents.push(tmp)
							tmp = []
							//i = 0
						} else {
							//i++;
						}
					}

					tmp.push({
						'content': content,
						'isTitle': false
					});

					if (tmp.length >= maxLineCount) {

						_this.contents.push(tmp)
						tmp = []
						//i = 0
					}
				}

				if (tmp.length > 0) {
					_this.contents.push(tmp)
				}
			},
			change(event) {
				console.log(this.currentIndex);

				const {
					current
				} = {
					...event.detail
				}

				if (current == 0) {
					this.$emit("change", -1);
				} else if (current == this.index2) {
					this.$emit("change", 1);
				}
			}
		}
	}
</script>

<style lang="scss">
	/* uni-page-body {
		display: flex;
		flex-direction: column;
	} */

	.bookreader {
		box-sizing: border-box;
		height: 100%;

		padding-top: var(--paddingTop);
		padding-right: var(--paddingRight);
		padding-bottom: var(--paddingBottom);
		padding-left: var(--paddingLeft);

		background-color: #F0AD4E;

		font-size: var(--fontSize);
		line-height: var(--lineHeight);
		/* text-indent: var(--textIndent); */

		.title {
			font-size: var(--titleFontSize);
			text-align: center;
		}

		uni-swiper {
			height: 100%;
		}

		uni-swiper-item {}

	}
</style>
